<template>
    <div class="comment">
        <!-- 输入框区域 -->
        <div class="Textarea-box">
            <textarea ref="textareaPl"
             v-model="contentFrind"
             rows="3" cols="3" >
                {{contentFrind}}
            </textarea>
            <div class='bottom'>
                 <span class='num' :class='{numed:contentFrind.length >140}'>{{140-contentFrind.length}}</span>
            </div>
        </div>
        <!-- 表情包at等 -->
      <div class="other-box">
        <char></char>
        <button class="right-pl">
            评论
        </button>
      </div>
      <!-- 评论区精彩评论 -->
      <div class="pl-content">
            <span class="title">精彩评论</span>
            <div class="pl-list">
                <img src="../../public/homeImg/recommGd1.jpg" alt="">
                <div class="pl-content-right">
                    <div class="pl-content-right-top">
                        <span>网名：</span>
                        <span>夏天这么热 ，会变成熟人还是热狗呢（doge）</span>
                    </div>
                    <div class="pl-right-other">
                        <span>10.09</span>
                        <ul>
                            <li><span class="iconfont">&#xf010d;</span><span>345</span></li>
                            <li @click="foucePl()"><span class="iconfont">&#xe607;</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="pl-list">
                <img src="../../public/homeImg/recommGd1.jpg" alt="">
                <div class="pl-content-right">
                    <div class="pl-content-right-top">
                        <span>网名：</span>
                        <span>夏天这么热 ，会变成熟人还是热狗呢（doge）</span>
                    </div>
                    <div class="pl-right-other">
                        <span>10.09</span>
                        <ul>
                            <li><span class="iconfont">&#xf010d;</span><span>345</span></li>
                            <li @click="foucePl()"><span class="iconfont">&#xe607;</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="pl-list">
                <img src="../../public/homeImg/recommGd1.jpg" alt="">
                <div class="pl-content-right">
                    <div class="pl-content-right-top">
                        <span>网名：</span>
                        <span>的中国 青春婀娜灯火里的中国 胸怀辽阔灯火漫卷的万里山河初心换回了百的中国 青春婀娜灯火里的中国 胸怀辽阔灯火漫卷的万里山河初心换回了百</span>
                    </div>
                    <div class="pl-right-other">
                        <span>10.09</span>
                        <ul>
                            <li><span class="iconfont">&#xf010d;</span><span>345</span></li>
                            <li @click="foucePl()"><span class="iconfont">&#xe607;</span></li>
                        </ul>
                    </div>
                </div>
            </div>
      </div>
    </div>
</template>
<script>
import Char from './slotChar.vue'
export default {
   data() {
    return {
        num:140,
        contentFrind:'',
        text:''
        // isShowZf:this.data[2]
    }
   },
   props:{
     data:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
   },
   watch:{
        contentFrind(newValue){
            // console.log(newValue)
        }
   },
   components:{Char},
   created(){
   
   },
   mounted() {
    //  console.log(this.contentFrind)
   },
   methods:{
    show(){
        this.$emit("ishowZfF", !this.data[2])
    },
    foucePl(){
        this.$refs.textareaPl.focus()
    }
   }
   
}
</script>

<style lang="less" scoped>
    .iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
    div,span,ul,li,img{
    font-size: 0;
}
.comment{
    background: #F3F3F4;
    width: 95%;
    padding: 20px;

.Textarea-box{


    border-radius: 5px;
    // padding: 20px;
   border-radius: 5px;
   position: relative;
    span{

        cursor: pointer;
          text-align: right;
        margin: 6px 0;
    }
    .cha{
        font-size: 20px;
        color: black;
        display: block;
    }
    .cha:hover{
        color: #9F9F9F;
    }
   span[name='title']{
    font-size: 20px;
    font-weight: 800;
     color: black;
   }

//    .zf-box{

    //  height: 160px;
    //  width: 100%;
    // box-sizing: border-box;
    // border: solid #E5E5E5 1px;
    // background: white;
    //     position: relative;
    textarea{
        -webkit-appearance: none ; //是为了去除内阴影样式，但是缺点是不可输入；
        -webkit-user-select: auto; // 解决输入问题；
        outline: none;
    resize: none;
    width: 100%;
    font-size: 16px;
  line-height: 29px;
    padding: 2px 15px 2px 11px;
    box-sizing: border-box;
    }
    textarea {
     letter-spacing: 1px;
      text-align: justify;
    //   text-indent: 48px;
      border: none;
      resize: none;
      outline: none;
      font-family: Avenir,Helvetica,Arial,sans-serif;
    }

    textarea::-webkit-scrollbar {
      width: 4px;    
    }

    textarea::-webkit-scrollbar-thumb {
      border-radius: 10px;
          box-shadow: inset 0 0 5px #e1e1e1;
    background: rgba(0, 0, 0, 0.2);
    }

    textarea::-webkit-scrollbar-track {
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 0;
    //   background: rgba(0,0,0,0.1);
    }
    .bottom{
        display: inline-block;
        align-items: center;
        position: absolute;
           right: 23px;

    top: 93px;

    div:first-child{
            width: 90%;
    display: inherit;
    }
           .num{
    font-size: 14px;
   
    color:#CFCFE7 ;
    cursor: pointer;
    
    }
    .numed{
        color: #CD1818;
    }
    }
 
//    }

}
.other-box:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }
   .other-box{
    position: relative;
    margin: 10px 0;
    div:first-child{
        float: left;
        position: absolute;
    top: 50%;
    transform: translateY(-50%);
    }
    .right-pl{
    outline: none;
    font-size: 18px;
    border: #CDCDCE solid 1px;
    padding: 6px 19px;
    color: #222;
    border-radius: 20px;
    float: right;
    
    }
    .right-pl:hover{
        background: #F3F3F4;
    }
    
   }
   .pl-content{
    .title{
        font-size: 19px;
        font-weight: 900;
        color: #929292;
    }
    .pl-list{
        display: flex;
        margin-top: 20px;
         img{
                 width: 52px;
                height: 52px;
                border-radius: 50%;
            }
        .pl-content-right{
             margin-left: 15px;
                 width: 100%;
             .pl-content-right-top{
                margin-bottom: 15px;
                width: 97%;
                span{
                    font-size: 16px;
                }
                span:first-child{
                    color: #507DAF;
                }
             }
            .pl-right-other:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }
            .pl-right-other{
                
                  span:first-child{
                    float: left;
                    font-size: 14px;
                    color: #979798;
                  }
                  ul{
                    float: right;
                    display: flex;
                     li{
                        display: flex;
                        width: 50px;
                        text-align: center;
                        justify-content: center;
                        line-height: 21px;
                        align-items: center;
                        height: 21px;
                        margin-right: 15px;
                        border-right: 1px solid #E0E0E0;
                    span{
                        color: #616162;
                        margin: 5px;
                      font-size: 16px;
                        cursor: pointer;
                    }
                    span:first-child{
                        color: #616162;
                       font-size: 19px;
                    }
                    span:last-child{
                       margin-right: 25px;
                    }
                    span:hover{
                       color: #B3B3B3;
                    }
                }
                li:last-child{
                    border-right:none !important;
                }
                  }
            }
        }
    }
   }
}
</style>